<template>
	<view class="box">
		<span class="icon1">|</span><span style="color: cornflowerblue;">基本信息</span>
		<view class="box-item">
			<view class="">
				计划编号: <span class="font">{{data.list.num}}</span>
			</view>
			<view class="">
				计划名称: <span class="font">{{data.list.name}}</span>
			</view>
			<view class="">
				设备名称: <span class="font">{{data.list.equipmentName}}</span>
			</view>
			<view class="">
				维护周期: <span class="font">{{data.list.create}}天</span>
			</view>
			<view class="">
				责任人: <span class="font">{{data.list.person}}</span>
			</view>
			<view class="">
				计划时间: <span class="font">{{data.list.createTime}} <span
						style="color: red;">至</span>{{data.list.endTime}}
				</span>
			</view>
			<view class="">
				维护说明: <span class="font">{{data.list.text}}</span>
			</view>
		</view>
		<span class="icon1">|</span><span style="color: cornflowerblue;">维保信息</span>
		<view class="box-item1">
			<span>维保描述</span>
			<textarea class="text1" cols="30" rows="10" placeholder="请填写维保描述"></textarea>
			<span>维保费用</span>
			<input class="uni-input" focus placeholder="请输入本次维保总费用" />
			<span>上传附件 <span class="sp1">只能上传jpg/png格式文件，文件不能超过1MB</span></span>
			<view class="download">
				<icon type="download" size="46" />
			</view>
			<view class="btn1">
				<button style="width: 410rpx;background-color: skyblue;">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		reactive,onMounted
	} from "vue";
	const data = reactive({
		list: {
			num: 202001131210,
			name: '日常养护',
			equipmentName: '设备1',
			type: '日常自主保全',
			create: '1',
			person: '张三',
			createTime: '01-13 12:00',
			endTime: '01-14 13:00',
			text: '请维保人员务必记录清楚！'
		}
	})
	onLoad((options) => {
		console.log(options);
	})
</script>

<style lang="less" scoped>
	.box {
		height: 100%;
		padding: 40rpx;
		background-color: aliceblue;

		.icon1 {
			width: 20rpx;
			height: 20rpx;
			background-color: cornflowerblue;
			color: cornflowerblue;
			margin-right: 5rpx;



		}

		.box-item {
			height: 400rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-bottom: 20rpx;

			.font {
				color: lightgray,
			}
		}

		.box-item1 {
			.text1 {
				background-color: white;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}

			.uni-input {
				background-color: white;
				height: 70rpx;
				margin-bottom: 10rpx;
			}

			.sp1 {
				font-size: 10rpx;
				color: lightgray;
			}

			.download {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>